<template>
  <div class="grid-app-nav">
    <!-- 触发按钮 -->
    <el-button 
      class="grid-trigger"
      @click="visible = true"
      circle
    >
      <el-icon><Operation /></el-icon>
    </el-button>

    <!-- 全屏宫格导航 -->
    <transition name="fade">
      <div v-if="visible" class="grid-fullscreen">
        <!-- 顶部栏 -->
        <div class="grid-header">
          <div class="header-search">
            <el-input
              ref="searchInputRef"
              v-model="searchText"
              placeholder="搜索应用..."
              clearable
              size="large"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
          <el-button class="close-btn" size="large" circle @click="visible = false">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>

        <!-- 分类标签 -->
        <div class="category-tabs">
          <div 
            v-for="cat in categories" 
            :key="cat.key"
            class="category-tab"
            :class="{ 'is-active': activeCategory === cat.key }"
            @click="activeCategory = cat.key"
          >
            <el-icon><component :is="cat.icon" /></el-icon>
            <span>{{ cat.title }}</span>
            <span class="tab-count">{{ cat.count }}</span>
          </div>
        </div>

        <!-- 应用宫格 -->
        <div class="apps-container">
          <transition-group name="app-list" tag="div" class="apps-grid">
            <div
              v-for="app in filteredApps"
              :key="app.path"
              class="app-item"
              @click="navigateTo(app)"
              @contextmenu.prevent="showAppMenu(app, $event)"
            >
              <div class="app-icon-wrapper">
                <div class="app-icon" :style="{ background: app.gradient || app.color }">
                  <el-icon><component :is="app.icon" /></el-icon>
                </div>
                <div v-if="app.badge" class="app-badge" :class="app.badgeType">
                  {{ app.badge }}
                </div>
                <div v-if="app.isFavorite" class="app-favorite">
                  <el-icon><Star /></el-icon>
                </div>
              </div>
              <div class="app-title">{{ app.title }}</div>
            </div>
          </transition-group>

          <el-empty 
            v-if="filteredApps.length === 0" 
            description="未找到匹配的应用"
            :image-size="120"
          >
            <el-button type="primary" @click="searchText = ''">清空搜索</el-button>
          </el-empty>
        </div>

        <!-- 底部分页指示器 -->
        <div class="grid-footer" v-if="filteredApps.length > pageSize">
          <div class="page-dots">
            <span 
              v-for="page in totalPages" 
              :key="page"
              class="dot"
              :class="{ 'is-active': currentPage === page }"
              @click="currentPage = page"
            ></span>
          </div>
          <div class="page-info">
            {{ (currentPage - 1) * pageSize + 1 }} - {{ Math.min(currentPage * pageSize, filteredApps.length) }} / {{ filteredApps.length }}
          </div>
        </div>
      </div>
    </transition>

    <!-- 应用右键菜单 -->
    <transition name="fade">
      <div 
        v-if="appMenuVisible" 
        class="app-menu"
        :style="{ left: appMenuX + 'px', top: appMenuY + 'px' }"
      >
        <div class="menu-item" @click="toggleFavorite">
          <el-icon><Star /></el-icon>
          <span>{{ currentApp?.isFavorite ? '取消收藏' : '添加收藏' }}</span>
        </div>
        <div class="menu-item" @click="openInNewTab">
          <el-icon><Link /></el-icon>
          <span>新标签页打开</span>
        </div>
        <div class="menu-item" @click="copyPath">
          <el-icon><DocumentCopy /></el-icon>
          <span>复制路径</span>
        </div>
      </div>
    </transition>

    <!-- 点击遮罩关闭菜单 -->
    <div v-if="appMenuVisible" class="menu-overlay" @click="appMenuVisible = false"></div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Operation, Search, Close, Star, Link, DocumentCopy
} from '@element-plus/icons-vue'

const router = useRouter()

const visible = ref(false)
const searchText = ref('')
const searchInputRef = ref(null)
const activeCategory = ref('all')
const currentPage = ref(1)
const pageSize = ref(48) // 每页48个（8x6）

// 应用右键菜单
const appMenuVisible = ref(false)
const appMenuX = ref(0)
const appMenuY = ref(0)
const currentApp = ref(null)

// 分类
const categories = ref([
  { key: 'all', title: '全部应用', icon: 'Grid', count: 0 },
  { key: 'lowcode', title: '低代码', icon: 'MagicStick', count: 0 },
  { key: 'business', title: '业务管理', icon: 'Briefcase', count: 0 },
  { key: 'data', title: '数据分析', icon: 'DataAnalysis', count: 0 },
  { key: 'system', title: '系统管理', icon: 'Setting', count: 0 },
  { key: 'favorites', title: '我的收藏', icon: 'Star', count: 0 }
])

// 所有应用
const allApps = ref([
  // 低代码平台
  { path: '/lowcode', title: '低代码平台', icon: 'MagicStick', category: 'lowcode', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', badge: 'AI', badgeType: 'danger' },
  { path: '/lowcode/ai-assistant', title: 'AI助手', icon: 'MagicStick', category: 'lowcode', color: '#667eea', badge: 'HOT', badgeType: 'danger' },
  { path: '/lowcode/quick-builder', title: '快速搭建', icon: 'Guide', category: 'lowcode', color: '#667eea', badge: 'HOT' },
  { path: '/lowcode/form-designer', title: '表单设计器', icon: 'Edit', category: 'lowcode', color: '#667eea' },
  { path: '/lowcode/page-designer', title: '页面设计器', icon: 'Document', category: 'lowcode', color: '#667eea' },
  { path: '/lowcode/api-designer', title: 'API设计器', icon: 'Connection', category: 'lowcode', color: '#667eea', badge: 'NEW' },
  { path: '/lowcode/flow-designer', title: '流程设计器', icon: 'Share', category: 'lowcode', color: '#667eea' },
  { path: '/lowcode/model-designer', title: '数据模型', icon: 'Coin', category: 'lowcode', color: '#667eea' },
  { path: '/lowcode/code-generator', title: '代码生成', icon: 'Cpu', category: 'lowcode', color: '#667eea', badge: 'NEW' },
  { path: '/lowcode/component-market', title: '组件市场', icon: 'ShoppingBag', category: 'lowcode', color: '#667eea', badge: 'HOT' },
  
  // 合同管理
  { path: '/contract/list', title: '合同列表', icon: 'Document', category: 'business', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', badge: 'HOT' },
  { path: '/contract/create', title: '新建合同', icon: 'DocumentAdd', category: 'business', color: '#f093fb' },
  { path: '/contract/approval', title: '合同审批', icon: 'CircleCheck', category: 'business', color: '#f093fb' },
  { path: '/contract/template', title: '合同模板', icon: 'FolderOpened', category: 'business', color: '#f093fb' },
  { path: '/contract/statistics', title: '合同统计', icon: 'DataAnalysis', category: 'data', color: '#f093fb' },
  { path: '/contract/reminder', title: '合同提醒', icon: 'Bell', category: 'business', color: '#f093fb' },
  
  // 资产管理
  { path: '/asset/list', title: '资产列表', icon: 'Box', category: 'business', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', badge: 'HOT' },
  { path: '/asset/create', title: '新增资产', icon: 'Plus', category: 'business', color: '#4facfe' },
  { path: '/asset/inventory', title: '资产盘点', icon: 'DocumentChecked', category: 'business', color: '#4facfe' },
  { path: '/asset/transfer', title: '资产调拨', icon: 'Position', category: 'business', color: '#4facfe' },
  { path: '/asset/maintenance', title: '资产维保', icon: 'Tools', category: 'business', color: '#4facfe' },
  { path: '/asset/disposal', title: '资产报废', icon: 'Delete', category: 'business', color: '#4facfe' },
  { path: '/asset/statistics', title: '资产统计', icon: 'DataAnalysis', category: 'data', color: '#4facfe' },
  
  // 设备管理
  { path: '/equipment/ledger', title: '设备台账', icon: 'SetUp', category: 'business', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', badge: 'HOT' },
  { path: '/equipment/inspection', title: '设备巡检', icon: 'View', category: 'business', color: '#43e97b' },
  { path: '/equipment/spot-check', title: '设备点检', icon: 'CircleCheck', category: 'business', color: '#43e97b' },
  { path: '/equipment/maintenance', title: '维保计划', icon: 'Calendar', category: 'business', color: '#43e97b' },
  { path: '/equipment/repair', title: '故障维修', icon: 'Tools', category: 'business', color: '#43e97b' },
  { path: '/equipment/spare-parts', title: '备件库存', icon: 'Box', category: 'business', color: '#43e97b' },
  { path: '/equipment/oee', title: '设备OEE', icon: 'TrendCharts', category: 'data', color: '#43e97b', badge: 'HOT' },
  { path: '/equipment/statistics', title: '设备统计', icon: 'DataAnalysis', category: 'data', color: '#43e97b' },
  
  // 销售管理
  { path: '/sales/orders', title: '销售订单', icon: 'ShoppingCart', category: 'business', color: '#fa709a' },
  { path: '/sales/quotation', title: '销售报价', icon: 'Money', category: 'business', color: '#fa709a' },
  { path: '/sales/delivery', title: '销售出库', icon: 'Upload', category: 'business', color: '#fa709a' },
  { path: '/sales/returns', title: '销售退货', icon: 'RefreshRight', category: 'business', color: '#fa709a' },
  { path: '/sales/customer-crm', title: '客户CRM', icon: 'UserFilled', category: 'business', color: '#fa709a', badge: 'NEW' },
  
  // 采购管理
  { path: '/purchase/orders', title: '采购订单', icon: 'Document', category: 'business', color: '#30cfd0' },
  { path: '/purchase/suppliers', title: '供应商', icon: 'OfficeBuilding', category: 'business', color: '#30cfd0' },
  { path: '/purchase/receipts', title: '采购入库', icon: 'Download', category: 'business', color: '#30cfd0' },
  { path: '/purchase/returns', title: '采购退货', icon: 'RefreshRight', category: 'business', color: '#30cfd0' },
  
  // 库存管理
  { path: '/inventory/products', title: '商品管理', icon: 'Goods', category: 'business', color: '#a8edea' },
  { path: '/inventory/stock', title: '库存查询', icon: 'Coin', category: 'business', color: '#a8edea' },
  { path: '/inventory/warehouses', title: '仓库管理', icon: 'House', category: 'business', color: '#a8edea' },
  { path: '/inventory/transfers', title: '库存调拨', icon: 'Sort', category: 'business', color: '#a8edea' },
  { path: '/inventory/check-dashboard', title: '盘点看板', icon: 'DataBoard', category: 'data', color: '#a8edea', badge: 'HOT' },
  
  // 生产制造
  { path: '/manufacturing/plan', title: '生产计划', icon: 'Calendar', category: 'business', color: '#ff9a9e', badge: 'HOT' },
  { path: '/manufacturing/orders', title: '生产订单', icon: 'Document', category: 'business', color: '#ff9a9e' },
  { path: '/manufacturing/work-orders', title: '工单管理', icon: 'Tickets', category: 'business', color: '#ff9a9e' },
  { path: '/manufacturing/progress', title: '生产进度', icon: 'TrendCharts', category: 'data', color: '#ff9a9e', badge: 'HOT' },
  { path: '/manufacturing/quality', title: '质量检验', icon: 'CircleCheck', category: 'business', color: '#ff9a9e' },
  
  // 财务管理
  { path: '/finance/voucher', title: '凭证管理', icon: 'DocumentCopy', category: 'business', color: '#ffecd2' },
  { path: '/finance/accounts', title: '科目管理', icon: 'Files', category: 'business', color: '#ffecd2' },
  { path: '/finance/cost-accounting', title: '成本核算', icon: 'Money', category: 'data', color: '#ffecd2', badge: 'HOT' },
  { path: '/finance/reports', title: '财务报表', icon: 'DataBoard', category: 'data', color: '#ffecd2' },
  
  // 人力资源
  { path: '/hr/employees', title: '员工管理', icon: 'User', category: 'business', color: '#ff6e7f' },
  { path: '/hr/attendance', title: '考勤管理', icon: 'Clock', category: 'business', color: '#ff6e7f' },
  { path: '/hr/salary', title: '薪资管理', icon: 'Money', category: 'business', color: '#ff6e7f' },
  { path: '/hr/recruitment', title: '招聘管理', icon: 'UserFilled', category: 'business', color: '#ff6e7f' },
  
  // 综合报表
  { path: '/reports', title: '报表中心', icon: 'DataBoard', category: 'data', gradient: 'linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%)', badge: 'HOT' },
  { path: '/reports/sales', title: '销售报表', icon: 'TrendCharts', category: 'data', color: '#e0c3fc' },
  { path: '/reports/inventory', title: '库存报表', icon: 'Box', category: 'data', color: '#e0c3fc' },
  { path: '/reports/finance', title: '财务报表', icon: 'Money', category: 'data', color: '#e0c3fc' },
  { path: '/reports/bi-dashboard', title: 'BI智能', icon: 'DataLine', category: 'data', color: '#e0c3fc', badge: 'HOT' },
  
  // 会员管理
  { path: '/member/members', title: '会员资料', icon: 'User', category: 'business', color: '#f77062', badge: 'HOT' },
  { path: '/member/levels', title: '等级管理', icon: 'TrendCharts', category: 'business', color: '#f77062' },
  { path: '/member/vip-card', title: 'VIP卡', icon: 'Medal', category: 'business', color: '#f77062' },
  { path: '/member/points-strategy', title: '积分策略', icon: 'Star', category: 'business', color: '#f77062' },
  { path: '/member/marketing', title: '营销活动', icon: 'Promotion', category: 'business', color: '#f77062' },
  
  // 系统管理
  { path: '/system/users', title: '用户管理', icon: 'User', category: 'system', color: '#c471f5' },
  { path: '/system/roles', title: '角色管理', icon: 'UserFilled', category: 'system', color: '#c471f5' },
  { path: '/system/menu', title: '菜单管理', icon: 'Menu', category: 'system', color: '#c471f5' },
  { path: '/system/settings', title: '系统设置', icon: 'Setting', category: 'system', color: '#c471f5' },
  { path: '/system/logs', title: '操作日志', icon: 'Document', category: 'system', color: '#c471f5' }
])

// 过滤后的应用
const filteredApps = computed(() => {
  let apps = allApps.value

  // 按分类筛选
  if (activeCategory.value === 'favorites') {
    apps = apps.filter(app => app.isFavorite)
  } else if (activeCategory.value !== 'all') {
    apps = apps.filter(app => app.category === activeCategory.value)
  }

  // 按关键词搜索
  if (searchText.value) {
    const keyword = searchText.value.toLowerCase()
    apps = apps.filter(app => 
      app.title.toLowerCase().includes(keyword) ||
      app.path.toLowerCase().includes(keyword)
    )
  }

  return apps
})

// 总页数
const totalPages = computed(() => {
  return Math.ceil(filteredApps.value.length / pageSize.value)
})

// 更新分类计数
const updateCategoryCounts = () => {
  categories.value.forEach(cat => {
    if (cat.key === 'all') {
      cat.count = allApps.value.length
    } else if (cat.key === 'favorites') {
      cat.count = allApps.value.filter(app => app.isFavorite).length
    } else {
      cat.count = allApps.value.filter(app => app.category === cat.key).length
    }
  })
}

// 导航
const navigateTo = (app) => {
  router.push(app.path)
  visible.value = false
  ElMessage.success(`打开 ${app.title}`)
}

// 显示应用菜单
const showAppMenu = (app, event) => {
  currentApp.value = app
  appMenuX.value = event.clientX
  appMenuY.value = event.clientY
  appMenuVisible.value = true
}

// 切换收藏
const toggleFavorite = () => {
  if (currentApp.value) {
    currentApp.value.isFavorite = !currentApp.value.isFavorite
    updateCategoryCounts()
    ElMessage.success(currentApp.value.isFavorite ? '已添加收藏' : '已取消收藏')
  }
  appMenuVisible.value = false
}

// 新标签页打开
const openInNewTab = () => {
  if (currentApp.value) {
    window.open(currentApp.value.path, '_blank')
  }
  appMenuVisible.value = false
}

// 复制路径
const copyPath = () => {
  if (currentApp.value) {
    navigator.clipboard.writeText(currentApp.value.path)
    ElMessage.success('路径已复制')
  }
  appMenuVisible.value = false
}

// 全局快捷键
const handleGlobalKeydown = (event) => {
  // Ctrl + G 打开宫格导航
  if ((event.ctrlKey || event.metaKey) && event.key === 'g') {
    event.preventDefault()
    visible.value = !visible.value
    if (visible.value) {
      nextTick(() => {
        searchInputRef.value?.focus()
      })
    }
  }
  
  // Esc 关闭
  if (event.key === 'Escape' && visible.value) {
    visible.value = false
  }
  
  // / 聚焦搜索
  if (event.key === '/' && visible.value) {
    event.preventDefault()
    searchInputRef.value?.focus()
  }
}

// 监听visible变化
watch(visible, (newVal) => {
  if (newVal) {
    nextTick(() => {
      searchInputRef.value?.focus()
    })
  }
})

onMounted(() => {
  document.addEventListener('keydown', handleGlobalKeydown)
  updateCategoryCounts()
})

onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleGlobalKeydown)
})
</script>

<style scoped>
.grid-trigger {
  position: fixed;
  right: 30px;
  bottom: 360px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(67, 233, 123, 0.4);
  z-index: 1000;
  transition: all 0.3s;
}

.grid-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(67, 233, 123, 0.5);
}

:deep(.panorama-dialog .el-dialog__body) {
  padding: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.grid-fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 顶部栏 */
.grid-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 30px 60px 20px;
  position: relative;
}

.header-search {
  width: 600px;
}

.close-btn {
  position: absolute;
  right: 60px;
  top: 30px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* 分类标签 */
.category-tabs {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 0 60px 20px;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.category-tab:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.category-tab.is-active {
  background: white;
  color: #667eea;
  font-weight: 600;
}

.tab-count {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.category-tab.is-active .tab-count {
  background: rgba(102, 126, 234, 0.1);
}

/* 应用网格 */
.apps-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px 60px;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 25px;
  max-width: 1600px;
  margin: 0 auto;
}

.app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.app-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

.app-icon-wrapper {
  position: relative;
}

.app-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.app-item:hover .app-icon {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.app-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.app-badge.danger {
  background: linear-gradient(135deg, #f56c6c 0%, #ff6b9d 100%);
}

.app-favorite {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #ffd93d 0%, #f9ca24 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.app-title {
  font-size: 13px;
  color: white;
  text-align: center;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 底部栏 */
.grid-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.footer-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.page-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s;
}

.dot.is-active {
  width: 24px;
  border-radius: 4px;
  background: white;
}

.page-info {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* 应用菜单 */
.app-menu {
  position: fixed;
  background: white;
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 10001;
  min-width: 160px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s;
  color: #606266;
  font-size: 14px;
}

.menu-item:hover {
  background: #ecf5ff;
  color: #409eff;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}

/* 动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.app-list-enter-active,
.app-list-leave-active {
  transition: all 0.3s;
}

.app-list-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.app-list-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

/* 滚动条 */
.apps-container::-webkit-scrollbar {
  width: 8px;
}

.apps-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.apps-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.apps-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* 响应式 */
@media (max-width: 1400px) {
  .apps-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

@media (max-width: 768px) {
  .apps-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;
  }
  
  .app-icon {
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
}
</style>

